<template>
  <a-spin :spinning="spinning" tip="Loading...">
    <div
      id="mainDom"
      ref="mainDom"
      style="height: 380px; width: 100%; border-right: 10px solid #f1f2f6"
    ></div>
  </a-spin>
</template>

<script>
import { home_weekCost } from "@/apis/system/Home/Home";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/line");

export default {
  created() {
    this.getWeekData();
  },
  data() {
    return {
      spinning: false,
      property: "value",
      weekDate: [],
      EUR: [],
      GBP: [],
      USD: [],
      CAD: [],
    };
  },
  methods: {
    async getWeekData() {
      this.spinning = true;
      let { code, responseBody } = await home_weekCost();
      if (code === "200") {
        this.weekDate = [];
        this.EUR = [];
        this.GBP = [];
        this.USD = [];
        this.CAD = [];
        responseBody.cad.forEach((item) => {
          this.weekDate.push(item.date);
          this.CAD.push(item.outSumOfMoney);
        });
        responseBody.eur.forEach((item) => {
          this.EUR.push(item.outSumOfMoney);
        });
        responseBody.gbp.forEach((item) => {
          this.GBP.push(item.outSumOfMoney);
        });
        responseBody.usd.forEach((item) => {
          this.USD.push(item.outSumOfMoney);
        });
        this.createChart();
        this.spinning = false;
      }
    },
    createChart() {
      //   var chartDom = ;
      var myChart = echarts.init(this.$refs.mainDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },

        legend: {
          data: ["CAD", "EUR", "GBP", "USD"],
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.weekDate,
        },
        yAxis: {
          name: "单位：万",
          type: "value",
        },
        series: [
          {
            name: "CAD",
            type: "line",
            stack: "Total",
            data: this.CAD,
          },
          {
            name: "EUR",
            type: "line",
            stack: "Total",
            data: this.EUR,
          },
          {
            name: "GBP",
            type: "line",
            stack: "Total",
            data: this.GBP,
          },
          {
            name: "USD",
            type: "line",
            stack: "Total",
            data: this.USD,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
</style>